<div class="field row radio"
	 on-enter-or-tab-key="nextField()"
	 on-tab-and-shift-key="prevField()"
	 key-to-option field="field"
	 ng-if="field.fieldOptions.length > 0">
    <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
		<h3>
			<small class="field-number">
				{{index+1}}
				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
			</small>
			{{field.title}}
			<span class="required-error" ng-show="!field.required">{{ 'OPTIONAL' | translate }}</span>
		</h3>
		<p class="col-xs-12">
			<small>{{field.description}}</small>
		</p>
	</div>
    <div class="col-xs-12 field-input">

        <div ng-repeat="option in field.fieldOptions" class="row-fluid">
            <label class="btn col-md-4 col-xs-12 col-sm-12"
                    style="margin: 0.5em; padding-left:30px"
                    ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
				<div class="letter" style="float:left">
					{{$index+1}}
				</div>
				<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
				    ng-focus="setActiveField(field._id, null, false)"
                    type="radio" class="focusOn"
				    value="{{option.option_value}}"
                    ng-model="field.fieldValue"
                    ng-model-options="{ debounce: 250 }"
                    ng-required="field.required"
					ng-change="$root.nextField()"/>

                <span ng-bind="option.option_value"></span>
            </label>
        </div>
    </div>
</div>
<br>
